$(function () {
    var In = true;
    var Out = false;

    var cention = document.querySelector('.center');
    cention.addEventListener('mouseenter', (e) => {
        if (In) {
            var x = e.clientX - e.target.offsetLeft;
            var y = e.clientY - e.target.offsetTop;
            var el = document.createElement('span');
            el.style.left = x + 'px';
            el.style.top = y + 'px';
            cention.appendChild(el);
            $('.center span').removeClass('out');
            $('.center span').addClass('in');
            span = document.querySelector('.center span');
            In = false;
            Out = true;
        }
    })
    cention.addEventListener('mouseleave', (e) => {
        if (Out) {
            var x = e.clientX - e.target.offsetLeft;
            var y = e.clientY - e.target.offsetTop;
            $('.center span').removeClass('in');
            $('.center span').addClass('out');
            $('.out').css('left', x + 'px');
            $('.out').css('top', y + 'px');
            Out = false;
            setTimeout(() => {
                cention.removeChild(span);
                In = true;
            }, 500)
        }
    })

})

